<template>
    <div class="father">
        <h2>我是父组件</h2>
        <div class="content">
            <Category>
                <template v-slot="gameLists">
                    <ul>
                        <li v-for="item in gameLists.youxi" :key="item.id">
                            {{ item.content }}
                        </li>
                    </ul>
                </template>
            </Category>
            <Category>
                <template v-slot:default="{youxi}">
                    <ul>
                        <ol v-for="item in youxi" :key="item.id">
                            {{ item.content }}
                        </ol>
                    </ul>
                </template>
            </Category>
            <Category>
                <template #default="gameLists">
                    <h2 v-for="item in gameLists.youxi"> {{ item.content }}</h2>
                </template>
            </Category>
        </div>
    </div>
</template>
<script lang="ts" setup name="Father">
import Category from "@/components/Category.vue";

</script>
<style scoped>
.father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
}

.content {
    display: flex;
    justify-content: space-evenly;
}
</style>
